<script>
/**
 * 盒子
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
} from 'vue';
import EchartContainer from '@/components/echartContainer.vue';
import * as echarts from 'echarts';

export default defineComponent({
    components: {
        EchartContainer,
    },
    props: {
        dataInfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    setup(props) {
        const optionFunc = () => {
            if (!EchartContainerRef.value) return;
            let option = {
                tooltip: {},
                grid: {
                    top: '20%',
                    left: '2%',
                    right: '2%',
                    bottom: '20%',
                    containLabel: true,
                },
                legend: {
                    itemGap: 5,
                    data: [],
                    textStyle: {
                        color: '#f9f9f9',
                        borderColor: '#fff',
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#f9f9f9',
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#d1e6eb',
                                margin: 15,
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 7,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#0a3256',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 20,
                            textStyle: {
                                color: '#d1e6eb',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 7,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#0a3256',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 20,
                            textStyle: {
                                color: '#d1e6eb',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '注册总量',
                        type: 'line',
                        // smooth: true, //是否平滑曲线显示
                        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: false,
                        symbol: 'emptyCircle',
                        symbolSize: 3,
                        emphasis: {
                            focus: 'series'
                        },
                        lineStyle: {
                            normal: {
                                color: '#4cdbfe', // 线条颜色
                            },
                            borderColor: '#f0f',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#4cdbfe',
                            },
                        },
                        tooltip: {
                            show: false,
                        },

                        data: [],
                    },

                ],
                dataZoom: [ // 添加 dataZoom 配置
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,
                        end: 50, // 初始显示的范围
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 0,
                        end: 50,
                    },
                ],
            };
            /** 初始化图表 */

            option.legend.data = dataContainer.dataInfo?.name || []
            option.xAxis[0].data = dataContainer.dataInfo?.xData
            option.dataZoom[0].end=dataContainer.dataInfo?.end
            dataContainer.dataInfo.data.forEach((v, index) => {
                // const list = []
                // v.forEach(item => {
                //     item = item.toFixed(2)
                //     list.push(item)
                //     console.log(item)
                // })
                // v = list
                // EchartContainerRef.value.initData(option)
                option.series[index] = {
                    name: dataContainer.dataInfo.name[index],
                    type: 'line',
                    // smooth: true, //是否平滑曲线显示
                    // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                    // showAllSymbol: false,
                    // symbol: 'emptyCircle',
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    symbol: 'show',
                    yAxisIndex: (index==dataContainer.dataInfo.data.length-1)?1:0,
                    symbolSize: 3,
                    lineStyle: {
                        normal: {
                            color: dataContainer.dataInfo.color[index], // 线条颜色
                        },
                        borderColor: '#f0f',
                    },
                    // label: {
                    //     show: dataContainer.dataInfo.showLabel ? false : true,
                    //     position: 'top',
                    //     textStyle: {
                    //         color: '#fff',
                    //     },
                    // },
                    itemStyle: {
                        normal: {
                            color: dataContainer.dataInfo.color[index],
                        },
                    },
                    // tooltip: {
                    //     show: false,
                    // },

                    data: dataContainer.dataInfo.data[index].map(v => { return Number(v)?.toFixed(2) }),
                }
            })

            EchartContainerRef.value.initData(option);
            // 监听鼠标移入事件
           

        }
        const EchartContainerRef = ref(); //组件实例
        const dataContainer = reactive({
            loading: false,
            dataInfo: {}
        });
        watch(
            () => props.dataInfo,
            (newDataInfo) => {
                dataContainer.dataInfo = newDataInfo
                console.log(newDataInfo)
                optionFunc()
            },
            {
                immediate: true,
                deep: true,
            },
        );
        onMounted(() => {
            optionFunc()
        });
        return {
            dataContainer,
            EchartContainerRef,
        };
    },
});
</script>

<template>
    <div class="box-cp-container">
        <EchartContainer ref="EchartContainerRef"></EchartContainer>
    </div>
</template>

<style lang="scss" scoped>
.box-cp-container {
    width: 100%;
    // overflow: auto;
    height: 100%;
}
</style>
